import React, { useEffect, useState } from 'react'
import Navbar from '../../components/Navbar'
import { SideBar } from 'antd-mobile'
import styles from "../../style/classify/cate.module.scss";
import { list, brandlist } from "../../apis/classify";
import classNames from 'classnames'
import { useNavigate } from 'react-router-dom';

export default function Classify() {
  const navigate = useNavigate()
  const [activeKey, setActiveKey] = useState('手机')
  const [name, setname] = useState('手机')
  const [cate, setcate] = useState([])
  const [brand, setbrand] = useState([])
  useEffect(() => {
    lists()
    brands(name)
  }, [])

  let lists = async () => {
    let res = await list()
    setcate(res.data)
  }

  let change = (a: any) => {
    setActiveKey(a)
    setname(a)
    brands(a)
  }

  let brands = async (a: any) => {
    let ok = await brandlist(a)
    setbrand(ok.data)
  }

  let fun = (brand: any) => {
    navigate('/brand',{state:{brand,activeKey}})
  }
  return (
    <div className={styles.classify}>
      <Navbar title="分类" />

      <div className={styles.container}>
        <SideBar activeKey={activeKey} onChange={(a) => change(a)}>
          {
            cate.map((item) => (
              <SideBar.Item key={item} title={item} style={{ fontSize: "16px" }} />
            ))
          }
        </SideBar>

        <div className={styles.main}>
          <div
            className={
              classNames(
                styles.content,
                activeKey === name && styles.active
              )}>
            {
              brand.map((item: any, index: any) => {
                return (
                  <span key={index} onClick={() => { fun(item.brand) }}>{item.brand}</span>
                )
              })
            }
          </div>

        </div>
      </div>
    </div>
  )
}
